/* eslint-disable @typescript-eslint/no-unused-expressions */
import { useEffect, useState } from 'react';
import * as echarts from 'echarts';
import './index.less';

const PieChart = (props: any) => {
  const { pieData, text } = props;
  const [activeYear, setActiveYear] = useState('今年');
  const yearList = [
    {
      key: 0,
      title: '今年',
    },
    {
      key: 1,
      title: '近1年',
    },
    {
      key: 2,
      title: '近3年',
    },
  ];

  const totalValue = pieData.reduce((pre: number, cur: any) => {
    return pre + cur.value;
  }, 0);

  const initPieChart = () => {
    const chartDom = document.getElementById('pie_chart');
    const myChart = echarts.init(chartDom as HTMLElement);
    const option = {
      //环形图中间文字
      title: {
        text: `${totalValue}`,
        subtext: text,
        textStyle: {
          fontSize: 20,
          color: '#fff',
          fontWeight: 400,
          marginTop: 20,
        },
        subtextStyle: {
          fontSize: 16,
          color: '#fff',
          fontWeight: 500,
        },
        textAlign: 'center', //图例文字居中显示
        x: '24%', //距离左边的距离
        y: '38%', //距离上边的距离
      },
      tooltip: {
        trigger: 'item',
      },
      legend: {
        textStyle: {
          // color: '#8C98A4',
          rich: {
            // 富文本，用以修改 legend 的样式
            a: {
              width: 130,
              fontSize: 14,
              color: '#fff',
              padding: [0, 30, 0, 0],
            },
            b: {
              fontSize: 16,
              color: '#fff',
              fontWeight: 'bold',
            },
          },
        },

        orient: 'vertical',
        icon: 'circle',
        itemHeight: 11, //修改icon图形大小
        show: true,
        top: 'center',
        left: '60%',
        formatter: (name: string) => {
          let target = null;
          for (let i = 0; i < pieData.length; i++) {
            if (pieData[i].name === name) {
              target = pieData[i].value;
            }
          }
          let arr = ['{a|' + name + '}', '{b|' + target + '}'];
          return arr.join('');
        },
      },
      series: [
        {
          type: 'pie',
          radius: ['45%', '85%'],
          color: [
            '#128FFF',
            '#56FFBC',
            '#55B1D7',
            '#895BD8',
            '#FF2B2B',
            '#FF8915',
            '#29B6FF',
          ],
          right: '50%',
          avoidLabelOverlap: false,
          itemStyle: {
            //图形样式
            normal: {
              borderColor: '#ffffff',
              borderWidth: 1,
            },
          },
          label: {
            show: false,
          },
          // 鼠标划入
          emphasis: {
            label: {
              show: false,
              fontSize: 20,
              fontWeight: 'bold',
            },
          },
          labelLine: {
            show: false,
          },
          data: pieData,
        },
      ],
    };

    option && myChart.setOption(option);
  };

  const yearClickHandle = (item: any) => {
    setActiveYear(item.title);
  };

  useEffect(() => {
    initPieChart();
  }, []);

  return (
    <div className="pie_chart_wrapper">
      <div className="year_tab_list">
        {yearList.map((item) => {
          return (
            <div
              key={item.key}
              onClick={() => yearClickHandle(item)}
              className={`year_tab_item ${
                activeYear === item.title ? 'active_year_tab' : null
              }`}
            >
              {item.title}
            </div>
          );
        })}
      </div>
      <div className="pie_chart" id="pie_chart"></div>
    </div>
  );
};

export default PieChart;
